<template>
	<view class="loading-page" v-if="show">
		<view :class="['page-main u-flex-center',mode]" :style="{
			height:height,
			paddingTop:paddingTop
			}">
			<u-loading-icon mode="circle" :text="loadText" :size="iconSize" :textSize="textSize" :vertical="true" :textColor="color" :color="loadingColor">
			</u-loading-icon>
		</view>
	</view>
</template>
<script>
	export default {
		name: "loading-page",
		data() {
			return {};
		},
		props: { // 此处定义传入的参数
			// 是否显示
			show: {
				type: Boolean,
				default: true,
			},
			// 模式 zoom-fixed-定位缩放 zoom-缩放 fullScreen - 全屏
			mode: {
				type: String,
				default: 'fullScreen',
			},
			// 文字
			loadText: {
				type: String,
				default: '加载中...',
			},
			// 图标大小
			iconSize: {
				type: String,
				default: '20',
			},
			// 字体大小
			textSize: {
				type: String,
				default: '12',
			},
			// 字体颜色
			color:{
				type: String,
				default: '#c8c9cc',
			},
			// 加载中图标颜色
			loadingColor:{
				type: String,
				default: '#c8c9cc',
			},
			// 加载页高度 模式 = full-screen时，当前失效
			height: {
				type: String,
				default: '800rpx',
			},
			paddingTop: {
				type: [String, Number],
				default: '',
			},
		},
		watch: {},
		mounted() {},
		methods: {},
	}
</script>
<style lang="scss">
	.page-main {
		width: 100%;
	}

	.fixed {}

	.fullScreen {
		height: 100vh !important;
		background-color: white;
		opacity: 0.6;
	}

	.zoom-fixed {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.zoom {}
</style>